<template>
    <el-form>
        <el-form-item>
            <el-transfer
            v-model="selectUsers"
            :data="allowUsers"
            :props="{
                key: 'id',
                label: 'name',
            }"
            :titles="['可选用户', '已选用户']"
        />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSave()"> 保存 </el-button>
        </el-form-item>
        
    </el-form>
</template>
<script setup lang="ts" name="RoleUsers">
import { ref, reactive, onMounted } from 'vue';
import { Request } from '@/app/request';
type User = {
    id?: number;
    name?: string;
};
// type User = Partial<Transform>
const props = defineProps<{
    roleId?: number;
}>();

const allowUsers = reactive<User[]>([]);
const selectUsers = ref<number[]>([]);
const emit = defineEmits(['yh-closedialog']);
const onRefresh = async () => {
    const req = new Request('角色用户查询', {roleId: props.roleId});
    const r = await req.post();
    if (r.code > 100) {
        allowUsers.length = 0;
        r.obj.forEach((u: User) => {
            allowUsers.push(u);
        });
        selectUsers.value.length = 0;
        r.ext.forEach((u: number) => selectUsers.value.push(u));
    }
};
onMounted(() => {
    onRefresh();
});
const onSave = async () => {
    // console.log(selectUsers.value);
    const req = new Request('设置角色用户', {
        roleId: props.roleId,
        userIds: selectUsers.value
    });
    const r = await req.post();
    if (r.code > 100) {
        emit('yh-closedialog');
    }
}
/*
 * @Description:
 * @Author: zht
 * @Date: 2024-02-05
 * @LastEditTime: 2024-02-05
 * @LastEditors: zht
 * 佛祖保佑      永无BUG
 */
</script>
<style lang="scss" scoped></style>
